@import "~@/assets/iconfont/font_h7ptsgnu64r/iconfont.css";
@import "~@/public-style.less";
.task-text{
    width: 100%;
    height: 22px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.task-container{
    width: 100%;
    height: 100%;
    display: flex;
    .content-container{
        width: calc(100% - 220px);
        height: 100%;
        padding-right: 20px;
        box-sizing: border-box;
        .content-top{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content:space-between;
            padding-left:10px;
            border-bottom: 1px solid rgba(0,0,0,.1);
            .left{
                display: flex;
                align-items: center;
                .title{
                    font-size: 20px;
                    color:@White-theme-title-color;
                }
                .icon{
                    width: 18px;
                    height: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: @foreground-color;
                    border-radius: 50%;
                    color:#fff;
                    padding:3px;
                    box-sizing: border-box;
                    cursor: pointer;
                    margin-left: 10px;
                    opacity: 0.7;
                }
            }
            .right{
                display: flex;
                align-items: center;
                margin-right: 60px;
                .long{
                    cursor: pointer;
                    color:rgba(255,255,255,.6);
                    margin-right: 15px;
                    font-size: 22px;
                }
                .short{
                    cursor: pointer;
                    color:rgba(255,255,255,.6);
                    font-size: 22px;
                }
                .active{
                    color:@foreground-color;
                }
            }
        }
        .content{
            padding-top:20px;
            box-sizing: border-box;
            ul{
                width: 100%;
                height: auto;
                display: flex;
                flex-wrap: wrap;
                overflow-y: scroll;
                max-height: 600px;
                &::-webkit-scrollbar{
                    width:4px;
                    background-color:transparent;
                    border-radius: 4px;
                  }
                &::-webkit-scrollbar-thumb{
                  background-color: #5d5e5f;
                  border-radius:4px;
                }
                .task-today{
                    height: 130px;
                    margin: 5px 10px 5px 0px;
                    background-color: rgba(80,80,80,0.3);
                    border:1px solid rgba(200,200,200,.4);
                    padding:10px;
                    box-sizing: border-box;
                    border-radius: 6px;
                    box-shadow: 0px 0px 2px rgba(0,0,0,.8);
                    position: relative;
                    color:@White-theme-title-color;
                    overflow: hidden;
                    transition: all .3s;
                    .name{
                        .task-text();
                    }
                    .description{
                        .task-text();
                        display: -webkit-box;
                    }
                    .task-content{
                        width: 100%;
                        height: 44px;
                        display: flex;
                        line-height: 22px;
                        .content-text{
                            width: 45px;
                            height: 44px;
                            display: block;
                        }
                        span{
                            width: calc(100% - 44px);
                            display: block;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }

                    }
                    .target-time{
                        .task-text();
                    }
                    .is-done{
                        position: absolute;
                        right: -22px;
                        top: -22px;
                        border-top: 20px solid transparent;
                        border-left: 20px solid transparent;
                        border-right: 20px solid transparent;
                        transform: rotate(45deg);
                    }
                    &:hover{
                        .tool{
                            display: flex;
                        }
                    }
                    .tool{
                        position: absolute;
                        right:20px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 125px;
                        height: 25px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        flex-wrap: nowrap;
                        display: none;
                        span{
                            width: 25px;
                            height: 25px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            border:1px solid rgba(200,200,200,.4);
                            font-size: 20px;
                            cursor: pointer;
                            transition: all .3s;
                            &:hover{
                                background-color:@foreground-color;
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar-right{
        width: 220px;
        height: 100%;
        .task-today-done{
            width: 100%;
            height: 300px;
            // background-color: #f1f1f1;
            background-color: rgba(80,80,80,0.3);
            border:1px solid rgba(200,200,200,.4);
            padding:5px;
            box-sizing: border-box;
            border-radius: 5px;
            .sidebar-right-title();
        }
        .history-task{
            width: 100%;
            margin-top: 10px;
            height: calc(100% - 320px);
            // background-color: #f1f1f1;
            background-color: rgba(80,80,80,0.3);
            border:1px solid rgba(200,200,200,.4);
            padding:5px;
            box-sizing: border-box;
            border-radius: 5px;
            .sidebar-right-title();
        }
    }
    .el-dialog__wrapper{
        .el-dialog{
            .el-dialog__body{
                .dialog-content{
                    div{
                        width: 100%;
                        // background-color: yellowgreen;
                        margin-top: 5px;
                        span{
                            width: 100%;
                            height: 24px;
                            display: flex;
                            align-items: center;
                            i{
                                color:red;
                            }
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    .cancel{
                       &:hover{
                            border-color: @foreground-hover-color;
                            color:@foreground-color;
                            background-color: @foreground-hover-color;
                       }
                    }
                    .determine{
                        background-color: @foreground-color;
                        border-color: @foreground-color;
                        &:hover{
                            background-color: @foreground-desaturate-color;
                        }
                    }
                }
            }

        }
    }
    .task-detail{
        &>.el-dialog{
            &>.el-dialog__body{
                &>div{
                    width: 100%;
                    height: auto;
                    display: flex;
                    margin-top: 10px;
                    &>label{
                        width: 100px;
                        height: 22px;
                        line-height: 22px;
                        text-align: right;
                        display: inline-block;
                        padding-right: 10px;
                        font-weight: bolder;
                    }
                    &>span{
                        width: calc(100% - 100px);
                        height: auto;
                        line-height: 22px;
                        display: inline-block;
                    }
                }
            }
        }
    }
}
.sidebar-right-title{
    &>span{
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        background-color: rgba(250, 250, 250,1);
        border-radius: 5px;
        a{
            font-size: 12px;
            cursor: pointer;
            text-decoration: none;
            color:rgba(50,50,50,.8);
            &:hover{
                color:@foreground-color;
            }
        }
    }
    ul{ 
        width: 100%;
        height: calc(100% - 22px);
        overflow-y: scroll;
        &::-webkit-scrollbar{
            width:4px;
            background-color:transparent;
            border-radius: 4px;
          }
        &::-webkit-scrollbar-thumb{
          background-color: #5d5e5f;
          border-radius:4px;
        }
        li{ 
            width: 100%;
            background-color: rgba(255,255,255,.1);
            color:#d2d2d2;
            margin-top: 5px;
            border-radius: 5px;
            padding: 5px;
            box-sizing: border-box;
            cursor: pointer;
            div{
                display: flex;
                align-items: center;
                font-size: 14px;
                label{
                    width: 50px;
                }
                span{
                    .task-text();
                }
            }
        }
    }
}